<template>
    <div class="danmuWrapper">
        <!--<div class="danmu"></div>-->
        <div class="danmu">
            <marquee behavior="scroll" direction="left" scrollamount="10">
                <div class="danmuImg"></div>
                <div class="danmuImg"></div>
                <div class="danmuImg"></div>
            </marquee>
        </div>

        <div class="bar">
            <marquee behavior="scroll" direction="right" scrollamount="10">
                <div class="barImg"></div>
                <div class="barImg"></div>
                <div class="barImg"></div>
            </marquee>
        </div>

    </div>
</template>

<script>
    export default {
        props: ['resources', 'pageType'],
        data() {
            return {}
        },
        mounted() {

        },
        methods: {}
    }
</script>
<style lang="less" scoped>
    .danmuWrapper{
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
        .danmu{
            position: absolute;
            bottom: 0;
            left: 0;
            height: 17.78rem;
            width: 100%;
            marquee{
                position: absolute;
                top: 0;
                left: 0;
                width: 13.23rem;
                height: 100%;
                .danmuImg{
                    width: 13.23rem;
                    height: 17.79rem;
                    background-image: url("../../img/index/danmu.png");
                    background-size: 100%;
                    background-repeat: no-repeat;
                    background-position: bottom;
                    position: absolute;
                    top: 0;
                    left: -13.23rem;
                }
                :first-child{
                    left: 13.23rem
                }
                :last-child{
                    left: 0;
                }
            }
        }
        .bar{
            height: 0.39rem;
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            marquee{
                position: absolute;
                top: 0;
                left: 0;
                width: 10rem;
                height: 100%;
                .barImg{
                    width: 10rem;
                    height: 0.39rem;
                    background-image: url("../../img/index/2018Bar.jpg");
                    background-repeat: no-repeat;
                    background-size: 100% auto;
                    position: absolute;
                    top: 0;
                    left: -10rem;
                }
                :first-child{
                    left: 10rem
                }
                :last-child{
                    left: 0;
                }
            }
        }

    }



</style>